import React, {PureComponent} from 'react'
import Status from '../component/device/status'
// import DeviceChart from '../component/device-control/device'
// import DeviceChart from '../component/chart/custom'
import DeviceChart from '../component/device/device'
import Mask from '../component/mask/mask'
import PressDeviceInfo from '../component/device/press'
import SpiDeviceInfo from '../component/device/spi'
import ReflowDeviceInfo from '../component/device/reflow'
import WaveDeviceInfo from '../component/device/wave'
import ClipDeviceInfo from '../component/device/clip-shooter'
import AOIDeviceInfo from '../component/device/aoi'
import AXIDeviceInfo from '../component/device/axi'
import WelderDeviceInfo from '../component/device/welder'
import {connect} from 'react-redux'
import {getDevice, getDeviceMetrics} from '../action/map.action'
import '../../css/device-control.scss'
import Icon from 'antd/lib/icon'
import {h3c} from '../component/index/config/deviceId'

/*设备监控*/
class DeviceControl extends PureComponent {
    constructor() {
        super()
        this.state = {
            mask: false,
            content: ''
        }

    }

    componentDidMount() {
        const {dispatch} = this.props
        /*获取设备计划*/
        dispatch(getDevice())
    }
    hideMask = () => {
        this.setState({
            mask: false
        })
    }

    openDetail = (params) => {
        const {dispatch} = this.props

        if (params.deviceName === '印刷机') {
            dispatch(getDeviceMetrics({
                type: params.deviceName,
                deviceId: params.deviceId
            }))
            this.setState({
                mask: true, content: <PressDeviceInfo/>
            })
        }

        if (params.deviceName === 'SPI') {
            dispatch(getDeviceMetrics({
                type: params.deviceName,
                deviceId: params.deviceId
            }))
            this.setState({
                mask: true, content: <SpiDeviceInfo/>
            })
        }

        if (params.deviceName === '回流炉') {
            dispatch(getDeviceMetrics({
                type: params.deviceName,
                deviceId: params.deviceId
            }))
            this.setState({
                mask: true, content: <ReflowDeviceInfo/>
            })
        }


        if (params.deviceName === '选择性波峰焊') {
            dispatch(getDeviceMetrics({
                type: params.deviceName,
                deviceId: params.deviceId
            }))
            this.setState({
                mask: true, content: <WaveDeviceInfo/>
            })
        }

        if (params.deviceName === '贴片机') {
            dispatch(getDeviceMetrics({
                type: params.deviceName,
                deviceId: params.deviceId
            }))
            this.setState({
                mask: true, content: <ClipDeviceInfo/>
            })
        }

        if (params.deviceName === 'AOI') {
            dispatch(getDeviceMetrics({
                type: params.deviceName,
                deviceId: params.deviceId
            }))
            this.setState({
                mask: true, content: <AOIDeviceInfo/>
            })
        }

        if (params.deviceName === '伺服压接机') {
            dispatch(getDeviceMetrics({
                type: params.deviceName,
                deviceId: params.deviceId
            }))
            this.setState({
                mask: true, content: <WelderDeviceInfo/>
            })
        }

        if (params.deviceName === 'AXI') {
            dispatch(getDeviceMetrics({
                type: params.deviceName,
                deviceId: params.deviceId
            }))
            this.setState({
                mask: true, content: <AXIDeviceInfo/>
            })
        }


    }

    getDeviceInfo = (smt, deviceId) => {
        const {deviceList} = this.props
        const data = deviceList.toJS()
        return data[smt].filter(d => d.deviceId === deviceId)[0] || {}
    }

    render() {
        const {deviceList} = this.props
        const data = deviceList.toJS()


        /*smt一线*/
        /*smt二线*/
        const {smt1, smt2} = h3c
        /*压接机*/
        const pushDevice = [
            {
                deviceId: 'H3CP01PRE01',
                len: 1
            }
        ]

        /*选择性波峰焊*/
        const selectDevice = [
            {
                deviceId: 'H3CP01SWS01',
                len: 3
            }
        ]

        /*axi*/
        const axiDevice = [
            {
                deviceId: 'H3C000AOI01',
                len: 1
            },
            {
                deviceId: 'H3C000AXI01',
                len: 1
            }
        ]
        const smt1Data = smt1.map(c => {
            return {...this.getDeviceInfo('SMT一线', c.deviceId), ...c}
        })

        const smt2Data = smt2.map(c => {
            return {...this.getDeviceInfo('SMT二线', c.deviceId), ...c}
        })

        let types3 = pushDevice.map(c => {
            return {...this.getDeviceInfo('SMT二线', c.deviceId), ...c}
        })

        let types4 = selectDevice.map(c => {
            return {...this.getDeviceInfo('SMT二线', c.deviceId), ...c}
        })

        let types5 = axiDevice.map(c => {
            return {...this.getDeviceInfo('SMT二线', c.deviceId), ...c}
        })


        const deviceArray = Object.keys(data)
            .map(key => data[key])
            .reduce((a, b) => a.concat(b))

        /*统计设备运行状态*/
        const runData = {
            on: deviceArray.filter(d => d.status === 'on', 0).length,
            off: deviceArray.filter(d => d.status === 'off', 0).length,
            error: deviceArray.filter(d => d.status === 'error', 0).length,
            total: deviceArray.length || 1
        }

        return (
            <div className="full-container">
                <Mask show={this.state.mask} hideMask={this.hideMask}>
                    {this.state.content}
                </Mask>
                <div style={{width: '100%', height: '100%'}}>
                    <Status data={runData}/>

                    <div className="device-chart-container">
                        {/*smt产线*/}
                        <div className="control-top">
                            <div className="control-area">在线库</div>
                            <div className="control-area">备料区</div>
                            <div className="control-area">成型、烧录区</div>
                            <div className="device-control-chart-container">
                                <DeviceChart types={smt1Data} openDetail={this.openDetail}  tooltipPos="top||right"/>
                            </div>
                            <div className="device-control-chart-container">
                                <DeviceChart types={smt2Data} openDetail={this.openDetail}  tooltipPos="top||left"/>
                            </div>
                        </div>

                        {/*通道*/}
                        <div className="control-hall">
                            <div className="device-gate-icon-hor"><Icon type="left"/><Icon type="right"/></div>
                            通道
                            <div className="device-gate-icon-hor"><Icon type="left"/><Icon type="right"/></div>
                            通道
                            <div className="device-gate-icon-hor"><Icon type="left"/><Icon type="right"/></div>
                        </div>

                        {/**/}
                        <div className="control-bottom">
                            <div className="device-machine" style={{width: '10%'}}>
                                <DeviceChart types={types3} openDetail={this.openDetail} tooltipPos="top"/>
                            </div>
                            <div className="control-area" style={{height: 'calc(100% - 4rem)'}}>在线库</div>
                            <div className="device-machine">
                                <DeviceChart types={types4} openDetail={this.openDetail} tooltipPos="top"/>
                            </div>
                            <div className="control-area" style={{height: 'calc(100% - 4rem)'}}>在线库</div>
                            <div className="device-machine" style={{width: '15%'}}>
                                <DeviceChart types={types5} openDetail={this.openDetail} tooltipPos="top||left"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}

function mapStoreToProps({deviceList, deviceMetrics}) {
    return {
        deviceList,
        reflow: deviceMetrics.reflow
    }
}

export default connect(mapStoreToProps)(DeviceControl)